<template>
  <BaseForm v-model="formDataModel" @close="$emit('callBack')" />

</template>

<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import SysConfigApi from '/@/api/common/SysConfigApi.ts';
import { translate } from "/@/i18n";
import FORM_FIELD_TYPE from "/@/constants/FormFieldType.ts";
defineOptions({
  name: 'SysConfigEdit',
})
const props = defineProps({
  modelValue: {

  }
})
const emit = defineEmits(['fetch-data', 'callBack'])

const formRef = ref<FormInstance>();
const title = ref<string>('');
const dialogFormVisible = ref<boolean>(false);



const formDataModel = ref({
  columnCount: 1,
  expandLimit: 6,
  autoFit: false,
  columnWidth: '300px',
  labelPosition: 'left',
  labelWidth: '100px',
  modelData: {},  //表单参数值 初始化
  callback: async (any: object) => {  //表单执行成功后回调
    //完成数据提交
    const { message } = await SysConfigApi.save(any)
    $baseMessage(message, 'success', 'vab-hey-message-success');
    dialogFormVisible.value = false


    //事件及数据推送到上一层父类
    emit('callBack', any); //把表单数据推送到上一层
  },
  items: [  //表单item数据初始化
    {
      label: "类型",
      field: "type",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    {
      label: "参数值",
      field: "value",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    {
      label: "状态",
      field: "status",
      clearable: true,
      type: FORM_FIELD_TYPE.SELECT,

      placeholder: "请输入",
      config: {
        optionsFunction: () => {   //通过函数处理本地数据源  完成组件初始化
          return [
            { label: "启用", value: 0 },
            { label: "禁用", value: 1 },
          ]
        },
        props: {
          label: 'label',
          value: 'value'
        }
      },
      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    {
      label: "字段描述",
      field: "valueDesc",
      clearable: true,
      type: FORM_FIELD_TYPE.EDITOR,

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    }
  ],
})






//页面数据加载
onMounted(async () => {

  //初始化数据model
  if (props.modelValue.query.sysConfigId) {
    const { data } = await SysConfigApi.getDetail({
      id: props.modelValue.query.sysConfigId   //从路由中获取参数
    })
    formDataModel.value.modelData = data;
  }

})


//方法暴露区域  todo
defineExpose({

})

</script>
